<template>
  <div class="nodeform">
    <el-table
      class="tablearea"
      :data="tabledatas"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="#"
        type="index"
        show-overflow-tooltip
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column label="节点名称" align="center" width="180">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="节点名称"
            :disabled='isdisable'
            v-model="scope.row.title"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="节点费用(元)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="节点费用"
            :disabled='isdisable'
            v-model="scope.row.cost"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="建档" align="center" width="120px">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.is_record"
            placeholder="是否建档"
            clearable
            size="mini"
            :style="{ width: '97%' }"
          >
            <el-option
              v-for="(item, index) in is_recordOption"
              :key="index"
              :label="item.title"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="科二练车(学时)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="科二练车学时"
            v-model="scope.row.class_hours_second"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="科二模拟(次)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="科二模拟次数"
            v-model="scope.row.simulation_second"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="科二考试(次)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="科二考试次数"
            v-model="scope.row.exam_second"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="科三练车(学时)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="科三练车学时"
            v-model="scope.row.class_hours_third"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="科三模拟(次)" align="center">
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.show"> -->
          <el-input
            size="mini"
            placeholder="科三模拟次数"
            v-model="scope.row.simulation_third"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="科三考试(次)" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            placeholder="科三考试次数"
            v-model="scope.row.exam_third"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label=""
        align="center"
        :render-header="renderHeader"
        v-if="isonlyone"
        width="70"
      >
        <template slot-scope="scope">
          <el-link
            @click="delect(scope.$index)"
            :underline="false"
            type="primary"
            size='small'
          >
            删除
          </el-link>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
// import Vue from 'vue'
export default {
  data() {
    return {
      //是否显示 添加
      isshowadd:false,
      //是否禁用表单
      isdisable:false,
      //表单数据
      tabledatas: [],
      multipleSelection: [],
      //是否建档
      is_recordOption: [
        {
          title: '是',
          id: 1,
        },
        {
          title: '否',
          id: 0,
        },
      ],
    }
  },
  props: {
    //是否只能添加一行
    isonlyone: {
      type: Boolean,
      default: true,
    },
    //接收的数据
    detailData: {
      type: Array,
      default: () => {
        return []
      },
    },
    //是新增还是编辑
    isedit:{
       type: Number,
      default: 0,
    },
    //全款费用加点金额
    nodeprice:{
      type: String,
      default: '',
    }
  },
  mounted() {
    if(this.isedit == 1){//分期
      this.isshowadd = true
      this.tabledatas = this.detailData
      this.isdisable = false
    }else{//全款

     if(this.detailData.length==0){
       this.tabledatas = [
         {
           title: '一次性支付所有费用',
          cost: '',
          is_record: 1,
          class_hours_second: '',
          simulation_second: '',
          exam_second: '',
          class_hours_third: '',
          simulation_third: '',
          exam_third: ''
         }
       ]
      this.tabledatas[0].cost = this.nodeprice
     }else{
       this.tabledatas = this.detailData
     }
      //禁用表单前三个
      this.isdisable = true
    }

    this.tabledatas.map((i) => {
      return i
    })
  },
  methods: {
    getData() {
      //把表单的数据传给父组件
      this.$emit('sendData', this.tabledatas)
    },
    renderHeader(h) {
      return (
        <div>
          <el-button type="primary" onClick={this.addAll} class="addbtn">
            新增
          </el-button>
        </div>
      )
    },
    edit(row, index) {
      // row.show = row.show ? false : true
      this.$set(this.tabledatas, index, row)
      // 修改后保存
    },

    submit() {
      this.tabledatas.map((i, index) => {
        this.$set(this.tabledatas, index, i)
      })
    },
    // 单个删除
    delect(index) {
      this.tabledatas.splice(index, 1)
    },
    //批量新增
    addAll() {
      if (this.multipleSelection.length == 0) {
        let list = {
          title: '',
          cost: '',
          is_record: '',
          class_hours_second: '',
          simulation_second: '',
          exam_second: '',
          class_hours_third: '',
          simulation_third: '',
          exam_third: '',
        }
        //不禁用前三项表单
        this.isdisable = false
        //往表单中追加数据
        this.tabledatas.push(list)
      } else {
        this.multipleSelection.forEach((val, index) => {
          this.tabledatas.splice(index, 0, JSON.parse(JSON.stringify(val)))
        })
      }
    },
    //批量删除
    delectAll() {
      for (let i = 0; i < this.tabledatas.length; i++) {
        const element = this.tabledatas[i]
        element.id = i
      }
      if (this.multipleSelection.length == 0)
        this.$message.error('请先至少选择一项')
      this.multipleSelection.forEach((element) => {
        this.tabledatas.forEach((e, i) => {
          if (element.id == e.id) {
            this.tabledatas.splice(i, 1)
          }
        })
      })
    },
    //选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
  watch: {
    //监听节点费用的变化
    nodeprice(val){
      if(this.isonlyone) return
       this.tabledatas[0].cost = val
    },
    detailData(val) {
      this.tabledatas = val
    },
    isonlyone(val) {
      if (!val) {
        this.tabledatas = [
          {
            title: '一次性支付所有费用',
            cost: '',
            is_record: 1,
            class_hours_second: '',
            simulation_second: '',
            exam_second: '',
            class_hours_third: '',
            simulation_third: '',
            exam_third: '',
          },
        ]
         //不禁用前三项表单
        this.isdisable = true
        //赋值价格
        this.tabledatas[0].cost = this.nodeprice
        console.log(this.nodeprice,'11111111111111')
      } else {
        this.tabledatas = this.detailData
        //不禁用前三项表单
        this.isdisable = false
      }
    },
    //监听是全款还是分期

  },
}
</script>


<style scoped lang='scss'>
.nodeform {
  position: relative;
  ::v-deep {
    .el-link {
      margin: 0 5px !important;
      font-size: 13px !important;
    }
    .el-button--small{
      padding:5px 10px !important;
    }
  }
  .tablearea {
    margin-top: 15px;
  }
}
</style>
